<template>
  <el-card class="salary-card" shadow="hover" @click="goToDetail">
    <div class="card-header">
      <div class="company-info">
        <div class="company-logo" :style="{'background-color': logoColor}">
          {{ data.company.substring(0, 1) }}
        </div>
        <div class="company-details">
          <div class="company-name">
            <span class="name">{{ data.company }}</span>
            <span v-if="data.workHours" class="work-hours-badge">
              {{ data.workHours }}
            </span>
          </div>
          <div class="position-info">
            {{ data.title }} | {{ data.level }}
          </div>
        </div>
      </div>
    </div>
    
    <div class="card-content">
      <div class="location">
        <el-icon><Location /></el-icon>
        {{ data.city }} · {{ data.country }}
      </div>
      
      <el-divider class="divider" />
      
      <div class="salary-info">
        <div class="salary-row">
          <span class="label">总薪酬:</span>
          <span class="value highlight-green">{{ data.total }}</span>
        </div>
        <div class="salary-row">
          <span class="label">月薪:</span>
          <span class="value">{{ data.monthly }}</span>
        </div>
        <div class="salary-row">
          <span class="label">股票:</span>
          <span class="value">{{ data.stock }}</span>
        </div>
      </div>
    </div>
    
    <div class="card-footer">
      <div class="metrics">
        <div class="metric-item like">
          <el-icon><Star /></el-icon>
          <span>{{ data.likes }}</span>
        </div>
        <div class="metric-item comment">
          <el-icon><ChatLineRound /></el-icon>
          <span>{{ data.comments }}</span>
        </div>
      </div>
      <div class="timestamp">
        <el-icon><Clock /></el-icon>
        {{ data.timeAgo }}
      </div>
    </div>
  </el-card>
</template>

<script>
import { defineComponent, computed } from 'vue';
import { useRouter } from 'vue-router';
import { 
  Star, 
  ChatLineRound, 
  Clock, 
  Location 
} from '@element-plus/icons-vue';

export default defineComponent({
  name: 'SalaryCard',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  components: {
    Star,
    ChatLineRound,
    Clock,
    Location
  },
  setup(props) {
    const router = useRouter();
    
    // 为公司Logo生成固定颜色
    const colors = [
      '#409eff', '#67c23a', '#e6a23c', '#f56c6c', 
      '#909399', '#9254de', '#36cfc9', '#ff9c6e'
    ];
    
    const logoColor = computed(() => {
      const index = props.data.company.charCodeAt(0) % colors.length;
      return colors[index];
    });
    
    // 跳转到详情页
    const goToDetail = () => {
      console.log(props.data);
      if (props.data.id) {
        router.push(`/workplaceroast/${props.data.id}`);
      }
    };

    return {
      logoColor,
      goToDetail
    };
  }
});
</script>

<style scoped>
.salary-card {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.salary-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  padding: 16px;
  background-color: #f9fafc;
  display: flex;
}

.company-info {
  display: flex;
  align-items: center;
}

.company-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.company-details {
  margin-left: 12px;
}

.company-name {
  display: flex;
  align-items: center;
}

.company-name .name {
  font-weight: 700;
  font-size: 16px;
  color: #1f2d3d;
}

.work-hours-badge {
  margin-left: 8px;
  padding: 2px 6px;
  background-color: #ff4d4f;
  color: white;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.85; }
  50% { opacity: 1; }
  100% { opacity: 0.85; }
}

.position-info {
  font-size: 14px;
  color: #5e6d82;
  margin-top: 2px;
}

.card-content {
  padding: 16px;
}

.location {
  display: flex;
  align-items: center;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 12px;
}

.location .el-icon {
  margin-right: 6px;
  color: #409eff;
}

.divider {
  margin: 10px 0;
}

.salary-info {
  font-size: 14px;
}

.salary-row {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  color: #5e6d82;
}

.value {
  font-weight: 500;
  color: #1f2d3d;
}

.highlight-green {
  color: #19be6b;
  font-weight: 700;
  font-size: 15px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #f5f7fa;
  border-top: 1px solid #ebedf0;
}

.metrics {
  display: flex;
  gap: 20px;
}

.metric-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #5e6d82;
  cursor: pointer;
  transition: all 0.3s;
}

.metric-item:hover {
  color: #409eff;
  transform: scale(1.05);
}

.metric-item .el-icon {
  margin-right: 5px;
  font-size: 16px;
}

.metric-item.comment:hover {
  color: #e6a23c;
}

.timestamp {
  color: #99a9bf;
  font-size: 13px;
  display: flex;
  align-items: center;
}

.timestamp .el-icon {
  margin-right: 5px;
}
</style>